<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时监控</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="proton/css/font-awesome.min.css" />
    <style type="text/css">
        .content
        {
            padding: 0px 350px 300px 0px;
            position: relative;
        }
        .x-map
        {
            background-color: #000000;
            width: 100%;
            height: 100%;
        }
        .x-log-panel
        {
            position: absolute;
            left: 0px;
            bottom: 0px;
            width: 100%;
            height: 300px;
            border-top: solid 1px #cccccc;
            z-index: 200;
            background-color: #ffffff;
        }
        .x-info-panel
        {
            position: absolute;
            right: 0px;
            top: 0px;
            width: 350px;
            height: 100%;
            border-left: solid 1px #cccccc;
            z-index: 100;
            background-color: #ffffff;
            padding-bottom: 300px;
        }
        .x-panel
        {
            position: relative;
            padding: 50px 10px 10px 10px;
            width: 100%;
            height: 100%;
        }
        .x-panel > h3
        {
            height: 40px;
            border-bottom: solid 1px #cccccc;
            line-height: 40px;
            font-size: 18px;
            margin: 0px;
            padding: 0px 0px 0px 10px;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
        }
        .x-panel > h3 > button
        {
            float: right;
            margin: 8px 18px 0px 0px;
        }
        .x-panel .x-panel-body
        {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .x-panel .x-panel-body hr
        {
            border-width: 1px 0px 0px 0px;
            border-color: #cccccc;
        }
        .x-panel .x-panel-body .x-col-3, .x-panel .x-panel-body .x-col-7 { height: 24px; line-height: 24px; }
        .x-panel .x-panel-body .x-col-3
        {
            color: #999999;
        }
        .x-panel .x-panel-body h4
        {
            height: 30px;
            line-height: 30px;
            padding: 0px;
            margin: 0px;
            font-size: 16px;
        }
        .x-panel .x-panel-body h4 span
        {
            font-size: 12px;
            font-weight: normal;
            margin-left: 4px;
            color: #999999;
        }
        .x-grids div
        {
            display: block;
            width: 100%;
            height: 24px;
            line-height: 24px;
            font-size: 10px;
            font-family: consolas;
            text-align: left;
            background-color: #cccccc;
            border: solid 1px #999999;
            margin: 0px 4px 4px 0px;
            padding-left: 4px;
        }
        .x-grids div.active
        {
            background-color: #0099ff;
            color: #ffffff;
        }
        .x-grids div:hover
        {
            cursor: pointer;
            background-color: #999999;
        }
        .x-grids div span
        {
            margin-left: 4px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="sidebar">
        <div class="logo"></div>
        <hr />
        <ul class="menu">
            <li><i class="fa fa-random"></i> <a href="#">线路管理</a></li>
            <li><i class="fa fa-history"></i> <a href="#">计划任务</a></li>
            <li><i class="fa fa-paper-plane"></i> <a href="#">创建行程</a></li>
            <li><i class="fa fa-bar-chart-o"></i> <a href="#">实时行程监控</a></li>
            <li><i class="fa fa-globe"></i> <a href="#">地图实时监控</a></li>
        </ul>
    </div>
    <div class="content">
        <div class="x-map">这里就留给地图了</div>
        <div class="x-log-panel">
            <div class="x-panel">
                <h3>行程任务日志</h3>
                <div class="x-panel-body">
                    <table class="table table-bordered table-striped table-condensed table-hover">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>类型</th>
                            <th>时间</th>
                            <th>内容</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>状态变化</td>
                            <td>2020-06-30 00:11:34</td>
                            <td>--</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="x-info-panel">
            <div class="x-panel">
                <h3>行程任务详情<button class="btn btn-sm btn-blue">终止</button></h3>
                <div class="x-panel-body">
                    <div class="x-row">
                        <div class="x-col-3 text-right">线路：</div>
                        <div class="x-col-7">北京 ~ 海口</div>
                        <div class="x-clearfix"></div>
                    </div>
                    <div class="x-row">
                        <div class="x-col-3 text-right">车牌号：</div>
                        <div class="x-col-7">京A12345</div>
                        <div class="x-clearfix"></div>
                    </div>
                    <div class="x-row">
                        <div class="x-col-3 text-right">终端ID：</div>
                        <div class="x-col-7">A123456</div>
                        <div class="x-clearfix"></div>
                    </div>
                    <div class="x-row">
                        <div class="x-col-3 text-right">SIM卡号：</div>
                        <div class="x-col-7">013800138000</div>
                        <div class="x-clearfix"></div>
                    </div>
                    <div class="x-row">
                        <div class="x-col-3 text-right">启动时间：</div>
                        <div class="x-col-7">2020-06-30 00:11:12</div>
                        <div class="x-clearfix"></div>
                    </div>
                    <hr />
                    <h4>报警标志<span>点击置位，高亮表示相应位为1</span></h4>
                    <div class="x-grids">
                        <div>00<span>紧急报警，收到应答后清零</span></div>
                        <div>01<span>超速报警</span></div>
                        <div>02<span>疲劳驾驶</span></div>
                        <div>03<span>危险预警，收到应答后清零</span></div>
                        <div>04<span>GNSS模块发生故障</span></div>
                        <div class="active">05<span>GNSS天线未接或被剪断</span></div>
                        <div>06<span>GNSS天线短路</span></div>
                        <div>07<span>终端主电源欠压</span></div>
                        <div>08<span>终端主电源掉电</span></div>
                        <div>09<span>终端LCD或显示器故障</span></div>
                        <div>10<span>TTS模块故障</span></div>
                        <div>11<span>摄像头故障</span></div>
                        <div>12<span>道路运输证IC卡模块故障</span></div>
                        <div>13<span>超速预警</span></div>
                        <div>14<span>疲劳驾驶预警</span></div>
                        <div>15<span>保留</span></div>
                        <div>16<span>保留</span></div>
                        <div>17<span>保留</span></div>
                        <div>18<span>当天累计驾驶超时</span></div>
                        <div>19<span>超时停车</span></div>
                        <div>20<span>进出区域，收到应答后清零</span></div>
                        <div>21<span>进出路线，收到应答后清零</span></div>
                        <div>22<span>路段行驶时间不足/过长,收到应答后清零</span></div>
                        <div>23<span>路线偏离报警</span></div>
                        <div>24<span>车辆VSS故障</span></div>
                        <div>25<span>车辆油量异常</span></div>
                        <div>26<span>车辆被盗（通过车辆防盗器）</span></div>
                        <div>27<span>车辆非法点火，收到应答后清零</span></div>
                        <div>28<span>车辆非法位移，收到应答后清零</span></div>
                        <div>29<span>碰撞预警</span></div>
                        <div>30<span>侧翻预警</span></div>
                        <div>31<span>非法开门报警，收到应答后清零</span></div>
                    </div>
                    <h4>状态位<span>点击置位，高亮表示相应位为1</span></h4>
                    <div class="x-grids">
                        <div>00<span>ACC状态</span></div>
                        <div>01<span>定位</span></div>
                        <div>02<span>纬度</span></div>
                        <div>03<span>经度</span></div>
                        <div>04<span>运营状态</span></div>
                        <div class="active">05<span>加密</span></div>
                        <div>06<span>保留</span></div>
                        <div>07<span>保留</span></div>
                        <div>08<span>车载状态(高位)</span></div>
                        <div>09<span>车载状态(低位)</span></div>
                        <div>10<span>车辆油路</span></div>
                        <div>11<span>车辆电路</span></div>
                        <div>12<span>车锁状态</span></div>
                        <div>13<span>前门</span></div>
                        <div>14<span>中门</span></div>
                        <div>15<span>后门</span></div>
                        <div>16<span>驾驶席门</span></div>
                        <div>17<span>自定义车门</span></div>
                        <div>18<span>GPS定位</span></div>
                        <div>19<span>北斗定位</span></div>
                        <div>20<span>GLONASS定位</span></div>
                        <div>21<span>Galileo定位</span></div>
                        <div>22<span>保留</span></div>
                        <div>23<span>保留</span></div>
                        <div>24<span>保留</span></div>
                        <div>25<span>保留</span></div>
                        <div>26<span>保留</span></div>
                        <div>27<span>保留</span></div>
                        <div>28<span>保留</span></div>
                        <div>29<span>保留</span></div>
                        <div>30<span>保留</span></div>
                        <div>31<span>保留</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="x-hint">

</div>
</body>
</html>